<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>test Json</title>
	<script src="js/jquery-1.11.2.js"></script>
                        
	<style type="text/css">
	.loginPanel{width:400px;height: auto;margin:0 auto;margin-top:200px;border:1px solid #ccc;border-radius: 8px;padding: 20px;background-color: #a40000;opacity: 0.8;color:#fff;box-shadow: 5px 5px 5px #888888;font-size:12px;}
	.loginPanel .title{height: 30px;line-height: 30px;font-size: 14px;border-bottom: 2px solid #fff;display: block;margin-bottom: 10px;}
	.loginPanel ul{margin:0;padding: 0;}
	.loginPanel ul li{list-style-type: none;height:25px;line-height: 25px;margin-top:10px;margin-bottom: 10px;}
	.loginPanel ul li label{  width: 60px;display: block;
	  float: left;margin-left: 20px;height: 25px;line-height: 25px;}
	.loginPanel ul li .txt{border: 1px solid #ccc;height: 21px;line-height: 21px;padding: 2px;float: left;}
	.loginPanel .icon{width: 14px;height:14px;background: url(images/icon.png) no-repeat; display: inline-block;margin-right: 10px;margin-top: 7px;float: left;}
	.loginPanel .checkRight{background-position: 0 0;}
	.loginPanel .checkWrong{background-position: -14px; 0;}
	.loginPanel .loading{background: url(images/onLoad.gif) no-repeat;background-position: 0 0;}
	</style>
</head>
<body>
	<script type="text/javascript">
		$(function(){


			var userNameObj = $("li > input").eq(0);
			
			userNameObj.bind('input propertychange',function(event) {
				var userName = $(this).val();
				var uName = $.trim(userName);
				if(uName != ""){
						$.ajax({
						url: 'asp/checkLoginjson.asp',
						type: 'GET',
						dataType: 'html',
						data: {'userName': userName},
						beforeSend : function(XMlHttpRequest){

						},
						success : function(data){
							$("#notice").html(data);
						},

						error: function(){

						},

						complate : function(XMLHttpRequest, textStatus){

						}
					})
				}
				
				
				

			});



		})

		function submit(){

			if($("#notice").find('span').hasClass('checkRight'))
			{
				$("#notice").html("<span class='icon loading'></span>登录成功");


				setTimeout(function(){
					window.location = "http://www.352.com";
				},3000)
			}


		}

		
	</script>

	
	<div class="loginPanel">
	  <span class="title">用户登录</span>
	    <ul>
	      <li><label>&nbsp;</label><span id="notice"></span></li>
	      <li><label>用户名：</label><input class="txt" name="LoginName" type="text" maxlength="12"></li>
	      <li><label>密 码：</label><input class="txt" class="txt" name="LoginPassword" type="password"  maxlength="12"></li>
	      <li><label>&nbsp;</label><input name="submitLogin" type="button" value="登录" width="102" height="37" onclick="submit()"></li>
	    </ul>
	</div>
	
</body>
</html>